<template>
  <view style="width: 100vw;height: 100vh">
    <vue-canvas-poster :widthPixels="445" :painting="painting" @success="posterSuccess"
                       @fail="posterFail"></vue-canvas-poster>
    <!-- 分享 -->
    <view style="position: relative; display: flex;flex-direction: column;align-items: center;">
      <canvas class="share_img">
        <img :src="posterSrc" />
      </canvas>
    </view>
  </view>
</template>

<script>

import {
  h5Url
} from '@/config/config.js';

export default {
  data() {
    return {
      id: null,
      posterSrc: '',
      painting: {
        width: '445px',
        height: '932px',
        views: [{
          type: 'image',
          url: null,
          mode: 'aspectFill',
          css: {
            width: '445px',
            height: '932px',
          }
        }]
      }
    }
  },
  onLoad(options) {
    this.id = options.id;
  },
  onShow() {
    let token = this.$db.get('userToken');
    if (token) {
      this.requestUserInfo()
    } else {

    }
  },
  methods: {
    posterSuccess(src) {
      this.posterSrc = src;
    },
    posterFail() {
      uni.showToast({
        title: '生成海报失败',
        icon: 'none'
      });
    },
    requestUserInfo(){
      this.$api.userInfo({}, res => {
        if (res.status) {
          //  获取比赛背景板
          this.$api.aievent_detail({
            id: this.id
          }, (res_init) => {
            let profile = res.data;
            let inviteUrl = h5Url + '#/pages/login/register?invitecode=' + profile.uid + '&codeWay=ai';
            let qrcode = {
              type: 'qrcode',
              content: inviteUrl,
              css: {
                bottom: '345px',
                right: '155px',
                color: '#000',
                width: '130px',
                height: '130px',
                borderWidth: '10px',
                borderColor: '#FFF',
                background: '#FFF',
              }
            }
            this.painting.views[0].url = res_init.data.helpImage
            this.painting.views.push(qrcode)
            uni.showToast({
              title: '若长按保存图片失败,可以截图保存到相册',
              icon: 'none'
            },5000);
          })
        }
      })
    },
    save: function() {
      // #ifdef H5
      this.down(this.posterSrc)
      // #endif

      // #ifdef MP || MP-ALIPAY || APP-PLUS || APP-PLUS-NVUE
      //	this.down(this.posterSrc)
      this.downloadImageOfMp(this.posterSrc)
      // #endif

    },
    down(imgsrc) {
      uni.downloadFile({
        url: imgsrc, // 图片的下载链接
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath, // 临时文件路径
              success: function() {
                uni.showToast({
                  title: '图片保存成功',
                  icon: 'success'
                });
                console.log(": res.tempFilePath-----", res.tempFilePath)
              },
              fail: function(err) {
                uni.showToast({
                  title: '图片保存失败',
                  icon: 'none'
                });
                console.error(err);
              }
            })
          }
        }
      });
    },
    downloadImageOfMp() {
      let _this = this
      console.log("下载图片---", this.posterSrc)
      _this.$common.successToShow('保存海报1')
      // 先下载到本地
      uni.downloadFile({
        url: _this.posterSrc,
        success() {
          uni.saveImageToPhotosAlbum({
            filePath: _this.posterSrc,
            success() {
              _this.$common.successToShow('保存成功')
              uni.navigateBack(1)
            },
            fail() {
              _this.$common.errorToShow('图片保存失败')
            }
          });
        }
      })
    },
  },
}
</script>

<style>
.share_img {
  width: 100vw;
  height: 100vh;
  img {
    width: 100vw;
    height: 100vh;
  }
}

</style>
